<template>
    <div class='homechart2' id="container4" style="width:100%;height:90%">

    </div>
</template>

<script>

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
    name: '',
    components: {},
    data() {
        return {
        }
    },
    created() { },
    mounted() {
        this.inits()
    },
    methods: {

        inits() {
            var chart = Highcharts.chart('container4', {
                credits: {
                    enabled: false, // 禁用版权信息
                },
                chart: {
                    type: 'areaspline',
                    backgroundColor: "transparent"//背景颜色
                },
                title: {
                    align: "left",
                    text: '主要指标',
                    color: '#fff',
                    style: {
                        fontSize: 16,
                        color: "#FFF",
                    },
                },
                xAxis: {
                    categories: [
                        '周一', '周二', '周三', '周四', '周五', '周六', '周日'
                    ],



                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ' 单位',
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} 百万)<br/>',
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: [{
                    data: [5, 10, 15, 10, 10, 12, 20],
                    color: "#c18df4",//面积背景颜色
                    // 取消线上的圆点
                    textColor:"#FFF",
                    marker: {
                        radius: 0,
                        lineWidth: 0,
                        lineColor: '##b689e3',
                        fillColor: '##b689e3',
                        states: {
                            hover: {
                                enabled: false
                            }
                        }
                    }
                }, {
                    data: [10, 15, 20, 15, 10, 5, 4],
                    color: "#72bcff",//面积北京颜色
                    marker: {
                        radius: 0,
                        lineWidth: 0,
                        lineColor: '#34abff',
                        fillColor: '#34abff',
                        states: {
                            hover: {
                                enabled: false
                            }
                        }
                    }
                }]
            });
        }
    }
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;

}
</style>
